<template>
  <div class="nav_tabs">
        <!-- <ul class="nav_tabs_items">
            <li class="nav_tabs_item" v-on:click="selectRouter(ele)" v-for="(ele,index) in $store.state.routerTabs.list" :key="ele.path"  :class="ele.path == $store.state.routerTabs.selected ? 'tabs_selected' : ''">
                {{ele.name}}
                <i v-if="ele.name != '首页'" v-on:click.stop="deleteIcon(index,$event)" class="iconfont icon-iconfontshequyijujue nav_tabs_item_icon"></i>
            </li>
        </ul> -->
        <!-- <el-tabs type="border-card">
            <el-tab-pane v-for="(ele,index) in $store.state.routerTabs.list" :key="ele.name">
                <span slot="label">{{ele.name}}</span>
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </el-tab-pane>
        </el-tabs> -->
        <!-- <el-tabs v-model="$store.state.routerTabs.selected" type="border-card" closable @tab-remove="removeTab">
            <el-tab-pane
                v-for="(item, index) in $store.state.routerTabs.list"
                :key="item.name"
                :label="item.name"
                :name="item.path"
            >
                {{item.content}}
            </el-tab-pane>
            </el-tabs> -->
            <el-tabs class="nav_tabs_items" v-model="$store.state.routerTabs.selected" type="border-card" @tab-click="handleClick">
                <el-tab-pane
                v-for="(item, index) in $store.state.routerTabs.list"
                v-on:click="selectRouter(item)"
                :key="item.path"
                :name="item.path" >
                    <span slot="label">{{item.name}}
                      <i v-if="item.name != '首页'"
                      v-on:click.stop="deleteIcon(index,$event)"
                      class="iconfont icon-iconfontshequyijujue nav_tabs_item_icon"></i></span>
                </el-tab-pane>
            </el-tabs>
  </div>
</template>

<script>
export default {
    data(){
        return {
            activeName2:"/home"
        }
    },
    methods:{
        // $store.state.routerTabs
        deleteIcon (index){
            if(index == 0){
                return
            }
            this.$store.state.routerTabs.list.splice(index,1);
            // 当删除tab后，路由切换为前一个对象的路由
            let selectItem =  this.$store.state.routerTabs.list[index-1];
            this.$router.push(selectItem.path);
            this.$store.state.routerTabs.selected = selectItem.path;
        },
        removeTab(path){
            console.log(path);

        },
        selectRouter(ele){
            this.routerTabs.selected = ele.path;
            this.$router.push(ele.path);
            this.$store.state.routerTabs.selected = ele.path;
        },
        test(){
            console.log('aaaa');
        },
        handleClick(tab, event) {
        console.log(tab.name);
        this.routerTabs.selected = tab.name;
        this.$router.push(tab.name);
        this.$store.state.routerTabs.selected = tab.name;
      }
    }
}
</script>

<style scoped lang="scss">
    @import "./nav-tabs.scss";
</style>
